<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>俄罗斯方块</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body>
    <div class="container">
        <h1>俄罗斯方块</h1>
        
        <div class="game-container">
            <div class="game-info">
                <div class="score-container">
                    <p>分数: <span id="score">0</span></p>
                    <p>等级: <span id="level">1</span></p>
                    <p>消除行数: <span id="lines">0</span></p>
                </div>
                
                <div class="next-piece">
                    <p>下一个方块:</p>
                    <canvas id="next-piece-canvas" width="100" height="100"></canvas>
                </div>
                
                <div class="controls">
                    <p>操作说明:</p>
                    <ul>
                        <li>←: 左移</li>
                        <li>→: 右移</li>
                        <li>↓: 加速下落</li>
                        <li>↑: 旋转</li>
                        <li>空格: 直接落到底部</li>
                        <li>P: 暂停/继续</li>
                    </ul>
                </div>
            </div>
            
            <div class="game-board-container">
                <canvas id="game-board" width="300" height="600"></canvas>
            </div>
        </div>
        
        <div class="buttons">
            <button id="start-button">开始游戏</button>
            <button id="pause-button">暂停</button>
            <button id="reset-button">重新开始</button>
        </div>
    </div>

    <script src="{{ url_for('static', filename='js/tetris.js') }}"></script>
</body>
</html> 